<template>
  <!-- <basic-container>
        <iframe :src="url" width="100%" height="800px" style="border:0"></iframe>
  </basic-container>-->
  <div class="home">
    <div class="block">
      <el-carousel trigger="click" height="186px">
        <el-carousel-item>
          <img src="../assets/img/banner_img1.png" alt />
        </el-carousel-item>
        <el-carousel-item>
          <img src="../assets/img/banner_img2.png" alt />
        </el-carousel-item>
      </el-carousel>
    </div>

    <div class="main">
      <div class="main-top">
        <span class="icons"></span>
        <span>我们的优势</span>
      </div>
      <div class="main-content">
        <div class="img1 hover">
          <h1>线上开户，无需网点面签</h1>
          <p>资金方、核心企业、担保人以及客户方均可实现线上提交资料，资管运营方收到资料实时开户，避免实地开户的麻烦流程。</p>
        </div>
        <div class="img2 hover">
          <h1>物流科技服务</h1>
          <p>91用车物流供应链服务平台，向中小企业提供物流科技服务。</p>
        </div>
        <div class="img3 hover">
          <h1>电子回单，财务轻松对账</h1>
          <p>客户方通过结算户对外进出资金，银行可出具相应划账电子回单，作为资金划账凭证。</p>
        </div>
      </div>
      <div class="main-content">
        <div class="img4 hover">
          <h1>动态获取企业经营信息</h1>
          <p>将结算户作为其主要的结算帐户对外进行清结算，对接客户方业务系统，实现订单与资金的一一关联，完整展现客户方经营状况，便于评估。</p>
        </div>
        <div class="img5 hover">
          <h1>自动化监控，提效降风险</h1>
          <p>结算户之间的关联可事先设定条件后台自动完成，保理公司可关联名下所有借款人结算户，自动化实时监控和自动清结算，无需要人工操作Ukey。</p>
        </div>
        <div class="img6 hover">
          <h1>避免被冻结的回款担忧</h1>
          <p>结算户的上层帐户为银联／银行／交易所的清算帐户，某一客户方的实体帐户冻结不影响保理公司对客户方银行电子户资金的正常扣划。</p>
        </div>
      </div>
    </div>
    <div class="main-bottom">
      <div>
        <h1>2000家</h1>
        <p>已服务实体企业</p>
        <h1>专注供应链物流科技服务</h1>
        <img src="../assets/img/icon_1.png" alt />
        <span></span>
      </div>
      <div>
        <h1>80家</h1>
        <p>已合作核心企业</p>
        <h1>服务中小微企业</h1>
        <img src="../assets/img/icon_2.png" alt />
        <span></span>
      </div>
      <div>
        <h1>16881笔</h1>
        <p>产品服务项目</p>
        <h1>助力实体经济</h1>
        <img src="../assets/img/icon_3.png" alt />
        <span></span>
      </div>
    </div>

    <div class="bottom">
      <div class="bottom-top">
        <span class="icons"></span>
        <span>合作企业</span>
      </div>
      <div class="bottom-content">
        <div>
          <div>
            <img src="../assets/img/hz_img1.png" alt />
            <div class="mask">京东金融</div>
          </div>
          <div>
            <img src="../assets/img/hz_img2.png" alt />
            <div class="mask">卡车之家</div>
          </div>
          <div>
            <img src="../assets/img/hz_img3.png" alt />
            <div class="mask">民生易贷</div>
          </div>
          <div>
            <img src="../assets/img/hz_img4.png" alt />
            <div class="mask">中国银联</div>
          </div>
        </div>
        <div>
          <div>
            <img src="../assets/img/hz_img5.png" alt />
            <div class="mask">中国石化</div>
          </div>
          <div>
            <img src="../assets/img/hz_img6.png" alt />
            <div class="mask">前海银管家</div>
          </div>
          <div>
            <img src="../assets/img/hz_img7.png" alt />
            <div class="mask">中国平安</div>
          </div>
          <div>
            <img src="../assets/img/hz_img8.png" alt />
            <div class="mask">中国人保财险</div>
          </div>
        </div>
        <div>
          <div>
            <img src="../assets/img/hz_img9.png" alt />
            <div class="mask">中国石油</div>
          </div>
          <div>
            <img src="../assets/img/hz_img10.png" alt />
            <div class="mask">银联供应链综合服务平台</div>
          </div>
          <div>
            <img src="../assets/img/hz_img11.png" alt />
            <div class="mask">昆仑银行</div>
          </div>
          <div></div>
        </div>
      </div>

      <div class="bottom-top">
        <span class="icons"></span>
        <span>合作银行</span>
      </div>
      <div class="bottom-partner">
        <div>
          <div>
            <img src="../assets/img/partner_img1.png" alt />
          </div>
          <div>
            <img src="../assets/img/partner_img2.png" alt />
          </div>
          <div>
            <img src="../assets/img/partner_img3.png" alt />
          </div>
          <div>
            <img src="../assets/img/partner_img4.png" alt />
          </div>
          <div>
            <img src="../assets/img/partner_img5.png" alt />
          </div>
        </div>
      </div>
    </div>

    <div class="footer">
      <div class="footer-left">
        <div class="border1">
          <div class="top">
            <div class="left">
              <img src="../assets/img/foot_img1.png" alt />
              <span>找产品</span>
            </div>
            <div class="right">
              <el-button size="mini">点击申请</el-button>
              <span>物流科技服务的快捷通道</span>
            </div>
          </div>
          <div class="fbottom">为客户提供物流科技服务产品的一站式对接。</div>
        </div>
      </div>
      <div class="footer-left">
        <div class="border2">
          <div class="top">
            <div class="left">
              <img src="../assets/img/foot_img1.png" alt />
              <span>找产品</span>
            </div>
            <div class="right">
              <el-button size="mini">点击申请</el-button>
              <span>物流科技服务的快捷通道</span>
            </div>
          </div>
          <div class="fbottom">为客户提供物流科技服务产品的一站式对接。</div>
        </div>
      </div>
      <div class="footer-left">
        <div class="border3">
          <div class="top">
            <div class="left">
              <img src="../assets/img/foot_img1.png" alt />
              <span>找产品</span>
            </div>
            <div class="right">
              <el-button size="mini">点击申请</el-button>
              <span>物流科技服务的快捷通道</span>
            </div>
          </div>
          <div class="fbottom">为客户提供物流科技服务产品的一站式对接。</div>
        </div>
      </div>
    </div>
    <div class="banquan">
      <span class="copyright">©2019版权所有</span>
      <span>服务协议|权利声明|版本更新|帮助中心|问题反馈</span>
      <span class="Service">
        <img src="../assets/img/dianhua.png" />服务热线：023-67493765
      </span>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { getHomeUrl } from "../api/admin/home";

export default {
  name: "wel",
  data() {
    return {
      // url: "http://www.baidu.com",
      // activeNames: ["1", "2", "3", "4"],
      // DATA: [],
      // text: "",
      // actor: "",
      // count: 0,
      // isText: false
    };
  },
  created() {
    getHomeUrl().then(res => {
      if (res && res.data.code == 0) {
        this.url = res.data.data;
      }
    });
  },
  computed: {
    ...mapGetters(["website"])
  },
  methods: {
    getData() {
      if (this.count < this.DATA.length - 1) {
        this.count++;
      } else {
        this.count = 0;
      }
      this.isText = true;
      this.actor = this.DATA[this.count];
    },
    setData() {
      let num = 0;
      let count = 0;
      let active = false;
      let timeoutstart = 5000;
      let timeoutend = 1000;
      let timespeed = 10;
      setInterval(() => {
        if (this.isText) {
          if (count == this.actor.length) {
            active = true;
          } else {
            active = false;
          }
          if (active) {
            num--;
            this.text = this.actor.substr(0, num);
            if (num == 0) {
              this.isText = false;
              setTimeout(() => {
                count = 0;
                this.getData();
              }, timeoutend);
            }
          } else {
            num++;
            this.text = this.actor.substr(0, num);
            if (num == this.actor.length) {
              this.isText = false;
              setTimeout(() => {
                this.isText = true;
                count = this.actor.length;
              }, timeoutstart);
            }
          }
        }
      }, timespeed);
    }
  }
};
</script>

<style scoped="scoped" lang="scss">
.wel-contailer {
  position: relative;
}

.banner-text {
  position: relative;
  padding: 0 20px;
  font-size: 20px;
  text-align: center;
  color: #333;
}

.banner-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.8;
  display: none;
}

.actor {
  height: 250px;
  overflow: hidden;
  font-size: 18px;
  color: #333;
}

.actor:after {
  content: "";
  width: 3px;
  height: 25px;
  vertical-align: -5px;
  margin-left: 5px;
  background-color: #333;
  display: inline-block;
  animation: blink 0.4s infinite alternate;
}

.typeing:after {
  animation: none;
}

@keyframes blink {
  to {
    opacity: 0;
  }
}
// mycss
.home {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  .block {
    width: 100%;
    height: 186px;
    margin: 0 auto;
    .el-carousel {
      width: 90%;
      margin: 0 auto;
      margin-top: 30px;
    }
    img {
      width: 100%;
      height: 186px;
    }
  }
  .main {
    width: 90%;
    display: flex;
    align-items: center;
    flex-direction: column;
    padding-top: 70px;
    padding-bottom: 30px;
    margin-top: 30px;
    // background: #fcfcfc;
    .main-top {
      width: 210px;
      height: 34px;
      line-height: 34px;
      border: 1px solid #ccc;
      display: flex;
      justify-content: center;
      align-items: center;
      background: #fff;
      margin-bottom: 30px;
      .icons {
        display: inline-block;
        width: 6px;
        height: 16px;
        background: rgb(66, 53, 238);
        margin-right: 6px;
      }
    }
    .main-content {
      width: 100%;
      display: flex;
      justify-content: space-around;
      margin-bottom: 60px;
      & > div {
        padding: 0 25px;
        width: 20%;
        height: 210px;
        border-radius: 10px;
        h1 {
          margin: 20px 0;
          font-weight: 600;
          font-size: 20px;
        }
        p {
          line-height: 26px;
          font-size: 14px;
        }
      }
      & .hover:hover {
        box-shadow: 2px 2px 9px rgba(0, 0, 0, 0.1);
      }
      .img1 {
        background: #f3f3f3 url("../assets/img/advantage_img1.png") no-repeat
          200px 140px;
      }
      .img2 {
        background: #f3f3f3 url("../assets/img/advantage_img2.png") no-repeat
          200px 140px;
      }
      .img3 {
        background: #f3f3f3 url("../assets/img/advantage_img3.png") no-repeat
          200px 140px;
      }
      .img4 {
        background: #f3f3f3 url("../assets/img/advantage_img4.png") no-repeat
          200px 140px;
      }
      .img5 {
        background: #f3f3f3 url("../assets/img/advantage_img5.png") no-repeat
          200px 140px;
      }
      .img6 {
        background: #f3f3f3 url("../assets/img/advantage_img6.png") no-repeat
          200px 140px;
      }
      & div:nth-of-type(2) {
        margin: 0 56px;
      }
    }
  }
  .main-bottom {
    width: 90%;
    display: flex;
    & > div {
      flex: 1;
      position: relative;
      display: flex;
      height: 250px;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      flex: 1;
      & > h1 {
        z-index: 22;
        color: #fff;
        font-size: 20px;
      }
      p {
        margin-top: 15px;
        margin-bottom: 35px;
        z-index: 22;
        color: #b8b8b8;
      }
      & > h1:first-child {
        font-size: 30px;
      }
      & > img {
        width: 100%;
        height: 250px;
        z-index: 20;
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
      }
      & > span {
        display: inline-block;
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 250px;
        opacity: 1;
        background: rgba(0, 0, 0, 0.4);
        z-index: 21;
      }
    }
  }
  .bottom {
    width: 100%;
    display: flex;
    // justify-content: center;
    align-items: center;
    flex-direction: column;
    .bottom-top {
      width: 210px;
      height: 34px;
      line-height: 34px;
      border: 1px solid #ccc;
      display: flex;
      justify-content: center;
      align-items: center;
      background: #fff;
      margin-bottom: 70px;
      margin-top: 100px;
      .icons {
        display: inline-block;
        width: 6px;
        height: 16px;
        background: rgb(66, 53, 238);
        margin-right: 6px;
      }
    }
    .bottom-content {
      width: 100%;
      & > div {
        width: 90%;
        margin: 0 auto;
        display: flex;
        justify-content: space-around;
        margin-bottom: 40px;
        & > div {
          width: 250px;
          height: 82px;
          position: relative;
          overflow: hidden;
          img {
            width: 100%;
            height: 82px;
          }
          .mask {
            display: inline-block;
            width: 100%;
            height: 82px;
            background: rgba(0, 0, 0, 0.8);
            color: #fff;
            text-align: center;
            line-height: 82px;
            position: absolute;
            top: 82px;
            left: 0;
            transition: top 1s linear;
          }
        }
        & > div:hover .mask {
          top: 0;
          left: 0;
        }
      }
    }
    .bottom-partner {
      width: 100%;
      & > div {
        width: 90%;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        margin-bottom: 40px;
        & > div {
          width: 250px;
          height: 82px;
          img {
            width: 100%;
          }
        }
      }
    }
  }
  .footer {
    width: 100%;
    height: 240px;
    background: #1d49b3;
    display: flex;
    justify-content: center;
    .footer-left {
      display: flex;
      flex-direction: column;
      width: 424px;
      .border1 {
        border-right: 1px solid #ccc;
        margin-top: 32px;
        margin-left: 92px;
      }
      .border2 {
        margin-left: 88px;
        border-right: 1px solid #ccc;
        margin-top: 32px;
      }
      .border3 {
        margin-left: 88px;
        margin-top: 32px;
      }
      .top {
        display: flex;
        & > div {
          display: flex;
          flex-direction: column;
        }
        .left {
          width: 88px;
          display: flex;
          justify-content: center;
          align-items: center;
          img {
            width: 52px;
            height: 57px;
          }
          span {
            display: inline-block;
            color: #fff;
            font-size: 28px;
          }
        }
        .right {
          margin-top: 16px;
          .el-button {
            margin-left: 30px;
            width: 90px;
            height: 32px;
            font-size: 14px;
            color: #1d49b3;
            font-weight: 600;
            span {
              display: inline-block;
            }
          }
          span {
            margin-top: 28px;
            margin-left: 8px;
            font-size: 13px;
            color: #d6dbed;
          }
        }
      }
      .fbottom {
        font-size: 13px;
        color: #fff;
        margin-top: 20px;
        height: 72px;
      }
    }
  }
  .banquan {
    width: 100%;
    height: 40px;
    line-height: 40px;
    font-weight: normal;
    color: #a7a7a7;
    display: flex;
    justify-content: center;
    background-image: url("../assets/img/beijing.png");
    background-size: 20px;
    margin-top: 80px;
    .copyright {
      margin-right: 30px;
    }
    .Service {
      margin-left: 30px;
      display: inline-block;
      display: flex;
      align-items: center;
    }
    img {
      width: 20px;
      height: 20px;
      margin-right: 10px;
    }
  }
}
</style>
